let $ = function (selector, context) {
    return new $.fn.init(selector, context);
};
$.fn = $.prototype = {
    constructor: $,
    init: function(selector, context) {
        this.length = 0;
        context = context || document;
        if (selector.indexOf('#') > -1) {
            this[0] = document.getElementById(selector.slice(1));
            this.length = 1;
        }else{
            let doms = context.getElementsByTagName(selector);
            for(let i = 0; i < doms.length; i++) {
                this[i] = doms[i];
            }
            this.length = doms.length;
        }
        this.context = context;
        this.selector = selector;
        return this;
    },
    size: function () {
        return this.length;
    },
    push: [].push,
    sort: [].sort,
    splice: [].splice
};
$.fn.init.prototype = $.fn;

$.extend = $.fn.extend = function() {
    let i = 1, target = arguments[0];
    if (i === arguments.length) {
        target = this;
        i--;
    }
    for (; i < arguments.length; i++) {
        for(let j in arguments[i]) {
            target[j] = arguments[i][j];
        }
    }
    return target;
};

$.fn.extend({
    on: (function () {
        if (document.addEventListener) {
            return function (type, fn) {
                for (let i = this.length - 1; i >= 0; i--) {
                    this[i].addEventListener(type, fn, false);
                }
                return this;
            }
        }
    })()
});
$.extend({
    camelCase: function(str) {
        return str.replace(/-(\w)/g, function (all, letter) {
            return letter.toUpperCase();
        });
    }
});
$.fn.extend({
    css: function() {
        if (this.length < 1)
            return this;

        if (arguments.length === 1) {
            if (typeof arguments[0] === 'string') {
                return getComputedStyle(this[0], false)[name];
            } else if(typeof arguments[0] === 'object') {
                for (let i in arguments[0]) {
                    for (let j = this.length - 1; j >= 0; j--) {
                        this[j].style[$.camelCase(i)] = arguments[0][i];
                    }
                }
            }
        }else if(arguments.length === 2) {
            for (let j = this.length - 1; j >= 0; j--) {
                this[j].style[$.camelCase(arguments[0])] = arguments[1];
            }
        }
        return this;
    }
});
$.fn.extend({
    attr: function() {
        if (this.length < 1) {
            return this;
        }
        if (arguments.length === 1) {
            if (typeof arguments[0] === 'string') {
                return this[0].getAttribute(arguments[0]);
            }else if(typeof arguments[0] === 'object') {
                for (let i in arguments[0]) {
                    for (let j = this.length - 1; j >= 0; j--) {
                        this[j].setAttribute(i, arguments[0][i]);
                    }
                }
            }
        } else if (arguments.length === 2) {
            for (let j = this.length - 1; j >= 0; j--) {
                this[j].setAttribute(arguments[0], arguments[1]);
            }
        }
        return this;
    }
});
$.fn.extend({
    html: function() {
        if (arguments.length === 0) {
            return this[0] && this[0].innerHTML;
        } else {
            for (let i = this.length - 1; i >= 0; i--) {
                this[i].innerHTML = arguments[0];
            }
        }
        return this;
    }
});
$('div')
    .css({
        height: '30px',
        border: '1px solid #000',
        'background-color': 'red'
    })
    .attr('class', 'demo')
    .html('add demo text')
    .on('click', function () {
        alert('clicked');
    });